var $item1;
var $item2;
var $item3;
var $item4;
var $item5;
var $slider;
var $order_item;
var user;
var index;
var $sliderSegmentedControl;
var $sliderGroup;

var statusMap = {
    PAY: "待付款",
    DELIVERY: "待發貨",
    RECEIPT: "待收貨",
    EVALUATION: "待評價",
    CANCEL: "已取消",
    FINISH: "已完成"
}

function init() {
    index = $.webUtil.getQueryString("index");
    $order_item = $(".order-item");
    $slider = $('#slider');
    $sliderSegmentedControl = $('#sliderSegmentedControl');
    $sliderGroup = $('#sliderGroup');

    $item1 = $('#item1');
    $item2 = $('#item2');
    $item3 = $('#item3');
    $item4 = $('#item4');
    $item5 = $('#item5');

    user = JSON.parse($.cookie('user'));
}

function getOrderList(data) {
    var result = [];
    mui.ajax($.constant.webRoot() + 'v1/orders/vo', {
        dataType: 'json',
        type: 'GET',
        async: false,
        data: data,
        success: function (response) {
            if (response.code === 200) {
                result = response.data;
            } else {
                mui.toast(response.message);
            }
        }
    });
    return result;
}

function initItem(data) {
    var result = '';
    var ordersList = getOrderList(data);
    $.each(ordersList, function (i, item) {
        var $orderItem = $('<div class="order-item" data-id="' + item.id + '"></div>');

        var $title = $('<div class="title">' +
            '<img src="../../img/logo.png"/><span class="name">傾城</span><span class="status">' + statusMap[item.status] + '</span>' +
            '<div style="clear: both"></div></div>');
        var $content;

        if (item.ordersItemVOList.length === 1) {
            $content = $('<div class="content">' +
                '<img src="' + item.ordersItemVOList[0].coverPicture + '"/><div class="desc"><div class="title">' + item.ordersItemVOList[0].title + '</div><div class="size">' + item.ordersItemVOList[0].name + '</div></div><div class="price"><div>NT$' + item.ordersItemVOList[0].price + '</div><div>共' + item.ordersItemVOList[0].num + '件</div></div>' +
                '<div style="clear: both"></div></div>');
        }
        if (item.ordersItemVOList.length === 2) {
            $content = $('<div class="content">' +
                '<img src="' + item.ordersItemVOList[0].coverPicture + '"/><img src="' + item.ordersItemVOList[1].coverPicture + '"/>' +
                '<div style="clear: both"></div></div>');
        }
        if (item.ordersItemVOList.length >= 3) {
            $content = $('<div class="content">' +
                '<img src="' + item.ordersItemVOList[0].coverPicture + '"/><img src="' + item.ordersItemVOList[1].coverPicture + '"/><img src="' + item.ordersItemVOList[2].coverPicture + '"/>' +
                '<div style="clear: both"></div></div>');
        }

        var $foot = $('<div class="foot"><span class="total" >NT$' + item.totalPrice + '</span><span class="desc">共' + item.totalNum + '件商品 合計：</span><div style="clear: both"></div></div>');

        $orderItem.append($title, $content, $foot);
        result += $orderItem[0].outerHTML;
    })
    return result;
}

function initSlider(index) {
    index = parseInt(index);
    var gallery = mui('.mui-slider');
    gallery.slider().gotoItem(index, 0);
    switch (index) {
        case 0:
            $item1.find('.mui-scroll').empty();
            $item1.find('.mui-scroll').append(initItem({userId: user.id}));
            break;
        case 1:
            $item2.find('.mui-scroll').empty();
            $item2.find('.mui-scroll').append(initItem({userId: user.id, status: "PAY"}));
            break;
        case 2:
            $item3.find('.mui-scroll').empty();
            $item3.find('.mui-scroll').append(initItem({userId: user.id, status: "DELIVERY"}));
            break;
        case 3:
            $item4.find('.mui-scroll').empty();
            $item4.find('.mui-scroll').append(initItem({userId: user.id, status: "RECEIPT"}));
            break;
        case 4:
            $item5.find('.mui-scroll').empty();
            $item5.find('.mui-scroll').append(initItem({userId: user.id, status: "EVALUATION"}));
            break;
        default:
            $item1.find('.mui-scroll').empty();
            $item1.find('.mui-scroll').append(initItem({userId: user.id}));
            break;
    }

    var _orderItem = $(".order-item");
    _orderItem.bind('tap', function () {
        var id = $(this).data("id");
        var url = '../orderinfo/index.html?id=' + id;
        mui.openWindow(url);
    });
}

function initView() {
    mui.init({
        swipeBack: false
    });

    initSlider(index);
}


function initListener() {

    $slider.bind('slide', function (e) {
        initSlider(e.detail.slideNumber);
    });

    $order_item.bind('tap', function () {
        mui.openWindow('../orderinfo/index.html', 'id');
    });
}

$(function () {
    init();
    initView();
    initListener();
});
